<template>
  <div class="container">
    <el-card>
      <el-form ref="form" inline :model="formList">
        <el-form-item label="标签名称">
          <el-input placeholder="请输入" v-model="formList.tags"></el-input>
        </el-form-item>
        <el-form-item label="省">
          <el-select
            style="width: 100px"
            v-model="formList.province"
            @change="changeProvince"
          >
            <el-option
              v-for="item in provinces"
              :key="item.id"
              :value="item.pro"
              :label="item.pro"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市">
          <el-select style="width: 100px" v-model="formList.city">
            <el-option
              v-for="item in city"
              :key="item.id"
              :value="item.pro"
              :label="item.pro"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业简称">
          <el-input
            v-model="formList.shortName"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            style="width: 100px"
            placeholder="请输入"
            v-model="formList.state"
          >
            <el-option value="0" label="禁用"> </el-option>
            <el-option value="1" label="启用"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="info" @click="resetForm"
            >清除</el-button
          >
          <el-button
            size="small"
            type="primary"
            icon="el-icon-search"
            @click="searchButton"
            >搜索</el-button
          >
        </el-form-item>
        <el-row type="flex" justify="end">
          <el-button
            @click="addButton"
            icon="el-icon-edit"
            type="success"
            size="small"
            >新增用户</el-button
          >
        </el-row>
      </el-form>

      <!-- 信息提示组件 -->
      <el-alert
        :title="`共${total}条记录`"
        type="info"
        class="alert"
        :closable="false"
        show-icon
      ></el-alert>

      <!-- table 组件 -->
      <el-table :data="tableList" border style="width: 100%">
        <el-table-column
          fixed
          type="index"
          label="序号"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="number"
          label="企业编号"
          align="center"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="shortName"
          label="企业简称"
          align="center"
          width="120"
        >
        </el-table-column>
        <el-table-column prop="tags" label="标签" align="center" width="120">
        </el-table-column>
        <el-table-column
          prop="creatorID"
          label="创建者"
          align="center"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="创建日期"
          align="center"
          width="120"
        >
        </el-table-column>
        <el-table-column prop="remarks" label="备注" align="center" width="200">
        </el-table-column>
        <el-table-column prop="state" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.state === 1 ? "启用" : "屏蔽" }}
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="220">
          <template slot-scope="scope">
            <el-button
              :plain="true"
              type="primray"
              icon="el-icon-edit"
              circle
              @click="editBtn(scope.row)"
            ></el-button>
            <el-button
              :plain="true"
              :type="scope.row.state === 1 ? 'success' : 'warning'"
              :icon="scope.row.state === 1 ? 'el-icon-check' : 'el-icon-close'"
              circle
              @click="disableBtn(scope.row)"
            ></el-button>
            <el-button
              :plain="true"
              icon="el-icon-delete"
              circle
              @click="deleteBtn(scope.row)"
              type="danger"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formList.page"
          :page-sizes="[5, 8, 10, 15]"
          :page-size="formList.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <CompanysAdd
      ref="CompanysAdd"
      :showDialog.sync="showDialog"
      @addCompleted="addCompleted"
    />
  </div>
</template>

<script>
import { list, remove, disabled } from "@/api/hmmm/companys";
import { provinces, citys1 } from "@/api/hmmm/citys.js";
import CompanysAdd from "@/module-hmmm/components/companys-add";
export default {
  components: {
    CompanysAdd,
  },
  data() {
    return {
      currentPage4: 4,
      formList: {
        // 这个是用来发请求用的
        page: 1,
        pagesize: 10,
        tags: "", //标签名称
        province: "", //企业所在地省份
        city: "", //企业所在城市
        shortName: "", //企业简称
        // state:1, //状态  1 启用  0 禁用
      },
      total: 0,
      tableList: [],
      provinces: [],
      city: [],
      area: [],
      showDialog: false,
    };
  },
  created() {
    //  初始化table表格
    this.getTableList();
  },
  methods: {
    // 获取表格数据函数
    async getTableList() {
      this.provinces = provinces(); //这个是获取省份下拉
      const { data } = await list(this.formList);
      this.tableList = data.items;
      this.total = data.counts;
    },

    // 每页条数变动的时候  重新发起请求
    handleSizeChange(val) {
      this.formList.pagesize = val;
      this.getTableList(this.formList);
    },

    // 页码改动的时候  重新发起请求
    handleCurrentChange(val) {
      this.formList.page = val;
      this.getTableList(this.formList);
    },

    // 当省份变化的时候  拿到一个值
    changeProvince(val) {
      this.city = citys1(val);
    },

    // 重置按钮
    resetForm() {
      this.formList = {
        // 这个是用来发请求用的
        page: 1,
        pagesize: 8,
        tags: "", //标签名称
        province: "", //企业所在地省份
        city: "", //企业所在城市
        shortName: "", //企业简称
        // state:1, //状态  1 启用  0 禁用
      };
      this.getTableList();
    },

    // 搜索按钮
    searchButton() {
      this.getTableList();
    },

    // 新增按钮
    addButton() {
      this.showDialog = true;
    },

    // 重新渲染
    addCompleted() {
      this.getTableList();
    },

    // 删除按钮
    async deleteBtn(value) {
      await this.$confirm("确认删除吗？");
      await remove(value);
      this.$message({
        message: "恭喜你，删除成功",
        type: "success",
      });
      if (this.tableList.length === 1) {
        this.formList.page = this.formList.page - 1;
      }
      this.getTableList();
    },

    // 禁用按钮
    async disableBtn(data) {
      if (data.state === 1) {
        await this.$confirm("确认禁用吗？");
        data.state = 0;
        await disabled(data);
        this.$message({
          message: "恭喜你，禁用成功",
          type: "success",
        });
      } else {
        await this.$confirm("确认启用吗？");
        data.state = 1;
        await disabled(data);
        this.$message({
          message: "恭喜你，启用成功",
          type: "success",
        });
      }

      this.getTableList();
    },

    // 编辑按钮
    editBtn(data) {
      this.$refs.CompanysAdd.getDetail(data);
    },
  },
};
</script>

<style scoped>
.el-form-item {
  margin-right: 30px;
}
.el-alert {
  margin: 15px 0;
}
.block {
  padding: 8px 0;
  text-align: center;
}
</style>
